<template>
  <div class="page-container" ref="page">
    <list-searcher
      :searchList="searchList"
      v-model:searchForm="queryParam"
      @submit="handleSubmit"
      @reset="handleReset"
      style="position: relative"
    />
    <div style="position: absolute; top: 25px; left: 25px">
      <a-tooltip content="报表周期可显示前3个月和未来1个月的数据" position="top" mini trigger="click">
        <icon-question-circle style="font-size: 16px" />
      </a-tooltip>
    </div>
    <template v-if="toSearchFlag">
      <div style="display: flex; justify-content: end; margin-bottom: 16px">
        <a-button type="primary" @click="handleExport">导出</a-button>
      </div>
    </template>

    <template v-if="toSearchFlag">
      <a-table :columns="columns" :data="data" v-if="toggleStatus == 0" :pagination="false" :loading="tableLoading">
        <template #siteName="{ record }">
          <div style="max-width: 150px; min-width: 120px; padding-right: 24px">
            <a-tooltip :content="record.siteName">
              <div class="ellipsis-text">{{ record.siteName }}</div>
            </a-tooltip>
          </div>
        </template>

        <template #recordRender="{ record, column, rowIndex }">
          <RecordRender :record="record[column.dataIndex]" />
        </template>
      </a-table>
      <a-row style="margin-top: 24px" v-if="toggleStatus == 0">
        <a-col style="display: flex; justify-content: space-between; align-items: center">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              font-weight: 400;
              color: #1d2129;
              width: 184px;
            "
            >每页展示
            <a-select
              :options="paginationOptions"
              v-model="pageSelect"
              :allow-clear="false"
              size="small"
              style="width: 70px"
              @change="changePageSelect"
            />
            项结果
          </div>
          <a-pagination
            :total="totalData"
            show-total
            @change="changePagination"
            show-page-size
            v-model:page-size="pageSelect"
            :current="currentPage"
          />
        </a-col>
      </a-row>
    </template>

    <div class="data-empty" v-if="!toSearchFlag">
      <a-empty> 暂无数据，请选择周期 </a-empty>
    </div>
  </div>
</template>

<script setup name="StoreRentalRateList">
  import { ref, reactive, onMounted, computed, nextTick } from 'vue'
  // import { usePageDict } from '@/hooks/useDict'
  import { storeRateList, exportStoreRentalRate } from '@/api/reportForms/storeRentalRate'
  import { useExport } from '@/hooks/list'
  import RecordRender from './components/record-render.vue'
  import { Message } from '@arco-design/web-vue'
  const toggleStatus = ref(0)

  const pageSelect = ref(10)
  const currentPage = ref(1)
  const tableLoading = ref(false)
  const toSearchFlag = ref(false)

  const paginationOptions = reactive([
    { value: 10, label: '10' },
    { value: 20, label: '20' },
    { value: 50, label: '50' },
  ])

  // 查询条件
  const searchList = computed(() => {
    return [
      {
        label: '报表周期',
        prop: 'queryDate',
        type: 'i-range-picker',
        // disabledDate: (current) => {
        //   const today = dayjs().startOf('day')
        //   const cur = dayjs(current)
        //   return cur.isBefore(today.subtract(3, 'month')) || cur.isAfter(today.add(1, 'month'))
        // },
        change: (value = []) => {
          queryParam.startDate = value[0]
          queryParam.endDate = value[1]
        },
      },
    ]
  })

  const queryParam = reactive({
    pageSize: 10,
    pageNumber: 1,
    queryDate: [],
  })

  const totalData = ref(0)

  // table 配置
  const columns = ref([
    { title: '门店', dataIndex: 'siteName', slotName: 'siteName', width: 150 },
    { title: '总收益（元）', dataIndex: 'totalAmount', width: 110 },
    { title: '平均出租率', dataIndex: 'avgRateStr', width: 120 },
  ])

  const data = ref([])
  // 导出事件
  const handleExport = () => {
    useExport(exportStoreRentalRate, queryParam)
  }

  /**
   * 切换分页
   */
  const changePagination = (e) => {
    queryParam.pageNumber = e
    currentPage.value = e
    handleSubmit('pageNumber')
  }

  /**
   * 切换每页展示个数
   */
  const changePageSelect = (e) => {
    queryParam.pageSize = e
    handleSubmit('pageSize')
  }

  //重置
  const handleReset = () => {
    data.value = []
    toSearchFlag.value = false
  }

  /**
   * 查询列表/图表
   * toggleStatus.value = 0 查询列表
   * toggleStatus.value = 1 查询图表
   */
  const handleSubmit = (e) => {
    if (!queryParam.queryDate || queryParam.queryDate.length == 0) {
      Message.warning('请选择报表周期后查询')
      return
    }
    if (!e || e == 'pageSize') {
      queryParam.pageNumber = 1
      currentPage.value = 1
    }
    getDataList()
  }

  const tableMinWidth = computed(() => {
    return columns.value.length * 120
  })
  const page = ref(null)

  /**
   * 查询列表
   */
  const getDataList = () => {
    toSearchFlag.value = true
    tableLoading.value = true
    storeRateList({ ...queryParam }).then(async (res) => {
      tableLoading.value = false
      if (res.code == 200) {
        data.value = []
        columns.value = columns.value.slice(0, 3)
        await nextTick()
        const result = res.result.data
        if (result.length > 0) {
          result.forEach((item) => {
            let dateTimeList = item.data
            if (Array.isArray(dateTimeList) && dateTimeList.length > 0) {
              dateTimeList.forEach((dateTimeItem, index) => {
                item[`dataTime${index}`] = dateTimeItem || {}
              })
            }
          })
          data.value = result
          totalData.value = res.result.total
          const date = result[0].data
          date.forEach((item, index) => {
            columns.value.push({
              width: 120,
              title: item.date,
              align: 'left',
              dataIndex: 'dataTime' + index,
              slotName: 'recordRender',
            })
          })
          if (tableMinWidth.value < page.value.clientWidth) {
            columns.value.push({
              title: '',
              dataIndex: 'dataTime--1',
            })
          }
        }
      }
    })
  }
  onMounted(() => {})
</script>

<style lang="less" scoped>
  #myEcharts {
    width: 100%;
    height: 400px;
  }
  .echarts-tooltip-diy {
    background: linear-gradient(304.17deg, rgba(253, 254, 255, 0.6) -6.04%, rgba(244, 247, 252, 0.6) 85.2%) !important;
    border: none !important;
    backdrop-filter: blur(10px) !important;
    /* Note: backdrop-filter has minimal browser support */

    border-radius: 6px !important;
    .content-panel {
      display: flex;
      justify-content: space-between;
      padding: 0 9px;
      background: rgba(255, 255, 255, 0.8);
      width: 164px;
      height: 32px;
      line-height: 32px;
      box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
      border-radius: 4px;
      margin-bottom: 4px;
    }
    .tooltip-title {
      margin: 0 0 10px 0;
    }
    p {
      margin: 0;
    }
    .tooltip-title,
    .tooltip-value {
      font-size: 13px;
      line-height: 15px;
      display: flex;
      align-items: center;
      text-align: right;
      color: #1d2129;
      font-weight: bold;
    }
    .tooltip-item-icon {
      display: inline-block;
      margin-right: 8px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
  .data-empty {
    margin-top: 100px;
  }
  .ellipsis-text {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  :deep(.arco-pagination-options) {
    display: none;
  }
</style>
